var groupId;
var username = localStorage.getItem("username");// 一个初始化列群聊列表的方法
fetch(`http://localhost/group/getOwnGroupList`, {
    method: 'GET', // 指定请求方法为 GET
    headers: {
        'Content-Type': 'application/json',// 指定请求头
        'Authorization': localStorage.getItem("token")
    }
})
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不正常');
        }
        return response.json();
    })
    .then(data => {
        if (data.flag) {
            const groupListDiv = document.getElementById('group-list');
            data.data.forEach(object=> {
                const groupItemHtml = `
                            <div onclick="showGroup('${object.group_id}','${object.group_name}',this)" class="group-item">
                                <img class="group-avatar" src="./favicon.ico">
                                <div class="group-name">${object.group_name}</div>
                            </div>
                        `;
                // 将用户条目的 HTML 添加到 userListDiv 中
                groupListDiv.innerHTML += groupItemHtml;
            });

        }else {
            alert('加载群聊列表失败，' + data.message)
            console.error('加载群聊列表失败:', data.message);
        }
    })
    .catch(error => {
        console.error('获取消息请求出现问题:', error);
    });


//
function goToFriends() {
    window.location.href = "friends.html"
}
function goToPyq() {
    window.location.href = 'pyq.html';
}
function goToMessage() {
    window.location.href = 'main.html'
}
function goToGroup() {
    window.location.href = 'group.html'
}

ws = new WebSocket("ws://localhost/group")
// 给ws绑定事件
ws.onopen = function () {

}

ws.onmessage = function (event) {
    var data = event.data;
    result = JSON.parse(data);
    if (result.fromName == undefined) {
        // 发送的是撤回的信令 然后就根据time遍历删除
        var messages = document.querySelectorAll('.other-message');
        messages.forEach(function (message) {
            var messageData = message.dataset.value;
            if (messageData) {
                var messageResult = JSON.parse(messageData);
                if (messageResult.time == data) {
                    message.parentNode.style.display = 'none';
                }
            }
        });
    }

    // var current = document.querySelector('.selected .user-name').innerText
    var html;
    if (result.fromName == username) {
        // 这个就是初始化页面的时候 才会发生这种情况
        html = "<div class=\"message own\"><div class=\"name\">我</div><div data-value=" + data + " class=\"own-message\">" + result.message + "</div></div>"
        //把定义的html语句，添加到页面上
    }
    // 私发的话就判断来者是不是你聊天的人 ，群发就看来的消息是不是群聊的id
    else if (result.groupId == groupId) {
        html = "<div class=\"message other\"><div class=\"name\">" + result.fromName + "</div><div data-value=" + data + " class=\"other-message\">" + result.message + "</div></div>"
    } else {
        return;
    }
    document.getElementById("content").innerHTML += html;
    var content = document.getElementById("content");
    content.scrollTop = content.scrollHeight;
}
// 当我点击了这个的时候 前三行就是 点击变色选中标识
function showGroup(id,groupName,element) {
    const items = document.querySelectorAll('.group-item');
    items.forEach(item => item.classList.remove('selected'));
    element.classList.add('selected');
    document.getElementById("title").innerText = groupName;
    groupId = id;
    // 其实这就已经没有问题了 不需要后续代码 发送消息的时候直接带着id

    // 可以调用接口，来把id存在session里，等close再删掉
    fetch(`http://localhost/group/storeId?groupId=${groupId}`, {
         method: 'GET', // 指定请求方法为 GET
         headers: {
            'Content-Type': 'application/json',// 指定请求头
            'Authorization': localStorage.getItem("token")
        }
    }).then(response => {
        // 检查请求是否成功
        if (!response.ok) {
            throw new Error('请求失败');
        }
        // 解析响应数据为 JSON
        return response.json();
    }).then(data => {
        if (data.flag) {
            console.log("存入groupId成功")
        }else {
            console.error('存入groupId失败:', data.message);
        }
    }).catch(error => {
        console.error('存groupId失败:', error);
    }).finally(() => {
        ws.send("初始化信令，填啥都无所谓")
    });

}

function handleKeyDown(event) {

    if (event.keyCode === 13) {
        event.preventDefault();
        send();
    }
}

//把消息发送到后端
function send() {
    var message = document.getElementById("message-content").value.trim();
    if (message == "") {
        //这里要在<div class="send">这个容器的右下角，显示不能发送空白消息
        var warningMessage = document.createElement("div");
        warningMessage.textContent = "不能发送空白消息";
        warningMessage.classList.add("warning-message");
        document.querySelector(".send").appendChild(warningMessage);
        setTimeout(function() {
            warningMessage.remove();
        }, 2000);
        return;
    }

    // var userList = document.getElementById('user-list');
    // var selectedItem = document.querySelector('.selected');
    // let secondUserItem = document.querySelector('.user-item').nextElementSibling;
    // // 就是你调用方法的时候就放到前面，但在数据库里没有该顺序，其实没必要，具体实现直接加一个字段即可
    // userList.insertBefore(selectedItem, secondUserItem);

    document.getElementById("message-content").value = "";


    var content = document.getElementById("content");
    content.scrollTop = content.scrollHeight;


    var json = {"toGroupId":groupId,"message":message};
    ws.send(JSON.stringify(json));


}

function showMessageBox(message) {
    document.getElementById("...").style.display = "block"
    document.getElementById("messageBox").innerText = message + "";

    var messageBox = document.getElementById("messageBox");
    messageBox.style.display = "block";
    setTimeout(function(){
        messageBox.style.display = "none";
    }, 2000);
}

function confirm() {

    const selectedUsers = document.querySelectorAll('input[name="selectedUser"]:checked');
    if (selectedUsers.length == 0) {
        return;
    }
    const selectedUsernames = Array.from(selectedUsers).map(user => {
        return user.nextElementSibling.querySelector('div').textContent;
    });


    // 发送所选用户信息给后端
    fetch('http://localhost/group/invite', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': localStorage.getItem("token")
        },
        body: JSON.stringify({ dtos: selectedUsernames })
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.json();
        })
        .then(data => {
            if (data.flag) {
                showMessageBox("邀请成功")
            } else {
                alert('发送邀请失败，' + data.message);
                console.error('发送邀请失败:', data.message);
            }
        })
        .catch(error => {
            console.error('发送邀请出现问题:', error);
        });
    cancel();
}

function popInvited() {
    document.getElementById('invite').style.display = "flex";
    fetch(`http://localhost/friends/getOwnFriends?username=${username}&groupId=${groupId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': localStorage.getItem("token")
        }
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.json();
        })
        .then(data => {
            if (data.flag) {
                const userListDiv = document.getElementById('invitedFriend');
                data.data.forEach(item => {
                    var user;
                    if (item.note != null) {
                        user = item.note;
                    } else {
                        user = item.friend_name;
                    }
                    const userItemHtml = `
                    <div style="align-items: center;display: flex;gap: 8px">
                        <input type="checkbox" name="selectedUser" value="${item.friend_id}">
                        <label style="align-items: center;display: flex;gap: 8px">
                            <img style="border-radius: 5px;width: 35px;height: fit-content" src="./favicon.ico">
                            <div>${user}</div>
                        </label>
                    </div>
                   
                    
                `;
                    userListDiv.innerHTML += userItemHtml;
                });

            } else {
                alert('获取好友列表失败，' + data.message)
                console.error('获取好友列表失败:', data.message);
            }
        })
        .catch(error => {
            console.error('请求出现问题:', error);
        });
}
function cancel() {
    // 取消操作，可根据需要添加逻辑
    document.getElementById('invite').style.display = "none";
    document.getElementById("invitedFriend").innerHTML = "";
}

